<template>
  <view class="sub-grade" @tap="handleSelectGrade">
    <view v-for="gradeClass in gradeOption" :key="gradeClass.title">
      <view class="sub-grade-title">{{ gradeClass.title }}</view>
      <view class="sub-grade-content">
        <text
          :class="activedClass(grade.id)"
          v-for="grade in gradeClass.data"
          :key="grade.id"
          :data-id="grade.id"
          >{{ grade.title }}</text
        >
      </view></view
    >
  </view>
</template>
<script>
export default {
  props: {
    gradeOption: {
      type: Array,
      default: () => []
    },
    selectedObj: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    gradeFlatOptions() {
      return this.gradeOption.reduce((prev, item) => {
        return prev.concat(item.data);
      }, []);
    }
  },
  watch: {
    selectedObj(c) {
      console.log(c, "===");
    }
  },
  methods: {
    activedClass(id) {
      return this.selectedObj.id === id ? "active" : "";
    },
    handleSelectGrade({ target: { dataset } }) {
      const { id } = dataset;
      if (!id) return;
      const targetObj = this.gradeFlatOptions.find(i => i.id === id);
      this.$emit("select", targetObj);
    }
  }
};
</script>
